Gerbang Kualitas Kode JavaScript: Menguasai Konfigurasi Pre-commit Hook

Di dunia pengembangan perangkat lunak yang terus berkembang, menjaga kualitas kode yang tinggi adalah hal yang terpenting. Kode yang bersih, terformat dengan baik, dan bebas bug tidak hanya mengurangi biaya pemeliharaan tetapi juga mendorong kolaborasi dan mempercepat siklus pengembangan. Salah satu teknik ampuh untuk menegakkan kualitas kode adalah penerapan gerbang kualitas kode menggunakan pre-commit hook. Artikel ini memberikan panduan komprehensif untuk mengonfigurasi pre-commit hook untuk proyek JavaScript, memungkinkan Anda mengotomatiskan pemeriksaan kualitas kode bahkan sebelum kode tersebut masuk ke repositori Anda.

Apa itu Pre-commit Hook?

Git hook adalah skrip yang dieksekusi Git sebelum atau sesudah peristiwa seperti commit, push, dan receive. Pre-commit hook, secara spesifik, berjalan sebelum sebuah commit diselesaikan. Mereka menawarkan peluang krusial untuk memeriksa perubahan yang akan di-commit dan mencegah commit yang tidak memenuhi standar kualitas yang telah ditentukan. Anggap saja mereka sebagai penjaga gerbang yang mencegah kode berkualitas rendah masuk ke basis kode Anda.

Mengapa Menggunakan Pre-commit Hook untuk Kualitas Kode JavaScript?

• Deteksi Kesalahan Dini: Pre-commit hook menangkap masalah kualitas kode di awal proses pengembangan, mencegahnya menyebar lebih jauh. Ini jauh lebih efisien daripada menemukan masalah saat tinjauan kode atau, yang lebih buruk, di lingkungan produksi.
• Pemformatan Kode Otomatis: Pastikan gaya kode yang konsisten di seluruh tim dan proyek Anda. Pemformatan otomatis mencegah perdebatan gaya dan berkontribusi pada basis kode yang lebih mudah dibaca.
• Mengurangi Beban Tinjauan Kode: Dengan menegakkan standar pengkodean secara otomatis, pre-commit hook mengurangi beban pada peninjau kode, memungkinkan mereka untuk fokus pada keputusan arsitektur dan logika yang kompleks.
• Peningkatan Keterpeliharaan Kode: Basis kode yang konsisten dan berkualitas tinggi lebih mudah untuk dipelihara dan dikembangkan seiring waktu.
• Menegakkan Konsistensi: Mereka memastikan bahwa semua kode sesuai dengan standar proyek, terlepas dari pengembang yang menulisnya. Ini sangat penting dalam tim terdistribusi yang bekerja dari lokasi berbeda – katakanlah, London, Tokyo, dan Buenos Aires – di mana gaya pengkodean individu mungkin bervariasi.

Alat Utama untuk Kualitas Kode JavaScript

Beberapa alat umum digunakan bersama dengan pre-commit hook untuk mengotomatiskan pemeriksaan kualitas kode JavaScript:

• ESLint: Linter JavaScript yang kuat yang mengidentifikasi potensi kesalahan, menegakkan gaya pengkodean, dan membantu meningkatkan keterbacaan kode. Ini mendukung berbagai aturan dan sangat dapat dikonfigurasi.
• Prettier: Pemformat kode yang beropini yang secara otomatis memformat kode untuk mematuhi gaya yang konsisten. Ini mendukung JavaScript, TypeScript, JSX, dan banyak bahasa lainnya.
• Husky: Alat yang memudahkan pengelolaan Git hook. Ini memungkinkan Anda untuk mendefinisikan skrip yang akan dieksekusi pada berbagai tahap alur kerja Git.
• lint-staged: Alat yang menjalankan linter dan pemformat hanya pada file yang di-stage, secara signifikan mempercepat proses pre-commit. Ini mencegah pemeriksaan yang tidak perlu pada file yang tidak berubah.

Mengonfigurasi Pre-commit Hook: Panduan Langkah demi Langkah

Berikut adalah panduan terperinci tentang cara mengatur pre-commit hook untuk proyek JavaScript Anda menggunakan Husky dan lint-staged:

Langkah 1: Instal Dependensi

Pertama, instal paket yang diperlukan sebagai dependensi pengembangan menggunakan npm atau yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Atau, menggunakan yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Langkah 2: Inisialisasi Husky

Husky menyederhanakan proses pengelolaan Git hook. Inisialisasi menggunakan perintah berikut:

            npx husky install
            

              
                Copy
              
            
          

Ini akan membuat direktori `.husky` di proyek Anda, yang akan menyimpan Git hook Anda.

Langkah 3: Konfigurasi Pre-commit Hook

Tambahkan pre-commit hook menggunakan Husky:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Perintah ini membuat file `pre-commit` di direktori `.husky` dan menambahkan perintah `npx lint-staged` ke dalamnya. Ini memberitahu Git untuk menjalankan lint-staged sebelum setiap commit.

Langkah 4: Konfigurasi lint-staged

lint-staged memungkinkan Anda untuk menjalankan linter dan pemformat hanya pada file yang di-stage, yang secara signifikan mempercepat proses pre-commit. Buat file `lint-staged.config.js` (atau `lint-staged.config.mjs` untuk modul ES) di root proyek Anda dan konfigurasikan sebagai berikut:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Konfigurasi ini memberitahu lint-staged untuk menjalankan ESLint dan Prettier pada semua file JavaScript dan TypeScript yang di-stage. Flag `--fix` di ESLint secara otomatis memperbaiki kesalahan linting yang dapat diperbaiki secara otomatis, dan flag `--write` di Prettier memformat file dan menimpanya dengan kode yang sudah diformat.

Sebagai alternatif, Anda dapat mendefinisikan konfigurasi langsung di file `package.json` Anda:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Langkah 5: Konfigurasi ESLint

Jika Anda belum melakukannya, konfigurasikan ESLint untuk proyek Anda. Anda dapat membuat file konfigurasi ESLint menggunakan perintah berikut:

            npx eslint --init
            

              
                Copy
              
            
          

Ini akan memandu Anda melalui proses pembuatan file konfigurasi ESLint (`.eslintrc.js`, `.eslintrc.json`, atau `.eslintrc.yml`) berdasarkan kebutuhan proyek Anda. Anda dapat memilih dari berbagai konfigurasi yang telah ditentukan atau membuat aturan kustom Anda sendiri.

Contoh `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Konfigurasi ini memperluas aturan ESLint yang direkomendasikan, aturan React yang direkomendasikan, aturan TypeScript yang direkomendasikan, dan terintegrasi dengan Prettier. Ini juga menonaktifkan aturan `react/prop-types` dan mengatur aturan `no-unused-vars` menjadi peringatan.

Langkah 6: Konfigurasi Prettier

Konfigurasikan Prettier dengan membuat file `.prettierrc.js` (atau `.prettierrc.json`, `.prettierrc.yml`, atau `.prettierrc.toml`) di root proyek Anda. Anda dapat menyesuaikan opsi pemformatan Prettier agar sesuai dengan pedoman gaya proyek Anda.

Contoh `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Konfigurasi ini mengatur Prettier untuk menggunakan kutipan tunggal, tanpa titik koma, koma di akhir, lebar cetak 120 karakter, dan lebar tab 2 spasi.

Sebagai alternatif, Anda dapat mendefinisikan konfigurasi Prettier di dalam `package.json`:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Langkah 7: Uji Konfigurasi Anda

Untuk menguji konfigurasi Anda, stage beberapa perubahan dan coba untuk melakukan commit:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Jika ada masalah linting atau pemformatan, ESLint dan Prettier akan secara otomatis memperbaikinya (jika memungkinkan) atau melaporkan kesalahan. Jika kesalahan dilaporkan, commit akan dibatalkan, memungkinkan Anda untuk memperbaiki masalah sebelum melakukan commit lagi.

Opsi Konfigurasi Lanjutan

Menggunakan Linter dan Pemformat yang Berbeda

Anda dapat dengan mudah mengintegrasikan linter dan pemformat lain ke dalam konfigurasi pre-commit hook Anda. Misalnya, Anda dapat menggunakan Stylelint untuk melakukan linting pada file CSS atau SASS:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Kemudian, perbarui file `lint-staged.config.js` Anda untuk menyertakan Stylelint:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Menjalankan Tes Sebelum Commit

Anda juga dapat menjalankan tes unit Anda sebagai bagian dari pre-commit hook. Ini membantu memastikan bahwa kode Anda berfungsi dengan benar sebelum di-commit. Dengan asumsi Anda menggunakan Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Perbarui file `lint-staged.config.js` Anda untuk menyertakan perintah tes:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Flag `--findRelatedTests` memberitahu Jest untuk hanya menjalankan tes yang terkait dengan file yang diubah, yang secara signifikan mempercepat proses.

Melewatkan Pre-commit Hook

Dalam beberapa kasus, Anda mungkin ingin melewatkan pre-commit hook untuk sementara. Anda dapat melakukannya dengan menggunakan flag `--no-verify` dengan perintah `git commit`:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Namun, secara umum disarankan untuk menghindari melewatkan hook kecuali benar-benar diperlukan, karena mereka memainkan peran penting dalam menjaga kualitas kode.

Pemecahan Masalah Umum

• Hook tidak berjalan: Pastikan Husky terinstal dan diinisialisasi dengan benar, dan direktori `.husky` ada di root proyek Anda. Verifikasi juga bahwa file `pre-commit` di direktori `.husky` dapat dieksekusi.
• Kesalahan linting tidak diperbaiki: Pastikan flag `--fix` digunakan dengan ESLint, dan konfigurasi ESLint Anda diatur untuk memperbaiki jenis kesalahan tertentu secara otomatis.
• Prettier tidak memformat file: Pastikan flag `--write` digunakan dengan Prettier, dan konfigurasi Prettier Anda diatur dengan benar.
• Pre-commit hook lambat: Gunakan lint-staged untuk hanya menjalankan linter dan pemformat pada file yang di-stage. Pertimbangkan juga untuk mengoptimalkan konfigurasi ESLint dan Prettier Anda untuk meminimalkan jumlah aturan dan pengaturan yang diperiksa.
• Konfigurasi yang bertentangan: Pastikan konfigurasi ESLint dan Prettier Anda tidak bertentangan satu sama lain. Jika ya, Anda mungkin perlu menyesuaikan salah satu atau kedua konfigurasi untuk menyelesaikan konflik. Pertimbangkan untuk menggunakan konfigurasi bersama seperti `eslint-config-prettier` dan `eslint-plugin-prettier` untuk menghindari konflik.

Praktik Terbaik untuk Pre-commit Hook

• Jaga agar hook tetap cepat: Hook yang lambat dapat secara signifikan memengaruhi produktivitas pengembang. Gunakan lint-staged untuk hanya memproses file yang di-stage dan optimalkan konfigurasi linter dan pemformat Anda.
• Berikan pesan kesalahan yang jelas: Ketika sebuah hook gagal, berikan pesan kesalahan yang jelas dan informatif untuk memandu pengembang tentang cara memperbaiki masalah.
• Otomatiskan sebanyak mungkin: Otomatiskan pemformatan kode dan linting untuk meminimalkan upaya manual dan memastikan konsistensi.
• Edukasi tim Anda: Pastikan semua anggota tim memahami tujuan dari pre-commit hook dan cara menggunakannya secara efektif.
• Gunakan konfigurasi yang konsisten: Pertahankan konfigurasi yang konsisten untuk ESLint, Prettier, dan alat lainnya di seluruh proyek Anda. Ini akan membantu memastikan bahwa semua kode diformat dan di-lint dengan cara yang sama. Pertimbangkan untuk menggunakan paket konfigurasi bersama yang dapat dengan mudah diinstal dan diperbarui di beberapa proyek.
• Uji hook Anda: Secara teratur uji pre-commit hook Anda untuk memastikan bahwa mereka berfungsi dengan benar dan tidak menyebabkan masalah yang tidak terduga.

Pertimbangan Global

Saat bekerja dalam tim yang terdistribusi secara global, pertimbangkan hal berikut:

• Versi alat yang konsisten: Pastikan semua anggota tim menggunakan versi ESLint, Prettier, Husky, dan lint-staged yang sama. Ini dapat dicapai dengan menentukan versi dalam file `package.json` Anda dan menggunakan manajer paket seperti npm atau yarn untuk menginstal dependensi.
• Kompatibilitas lintas platform: Uji pre-commit hook Anda di berbagai sistem operasi (Windows, macOS, Linux) untuk memastikan bahwa mereka berfungsi dengan benar di semua platform. Gunakan alat dan perintah lintas platform jika memungkinkan.
• Perbedaan zona waktu: Perhatikan perbedaan zona waktu saat berkomunikasi dengan anggota tim tentang masalah pre-commit hook. Berikan instruksi dan contoh yang jelas untuk membantu mereka menyelesaikan masalah dengan cepat.
• Dukungan bahasa: Jika proyek Anda melibatkan pekerjaan dengan beberapa bahasa, pastikan pre-commit hook Anda mendukung semua bahasa yang digunakan dalam proyek. Anda mungkin perlu menginstal linter dan pemformat tambahan untuk setiap bahasa.

Kesimpulan

Menerapkan pre-commit hook adalah cara yang efektif untuk menegakkan kualitas kode, meningkatkan kolaborasi tim, dan mengurangi biaya pemeliharaan dalam proyek JavaScript. Dengan mengintegrasikan alat seperti ESLint, Prettier, Husky, dan lint-staged, Anda dapat mengotomatiskan pemformatan kode, linting, dan pengujian, memastikan bahwa hanya kode berkualitas tinggi yang di-commit ke repositori Anda. Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini, Anda dapat menyiapkan gerbang kualitas kode yang kuat yang akan membantu Anda membangun aplikasi JavaScript yang lebih bersih, lebih mudah dipelihara, dan lebih andal. Terapkan praktik ini dan tingkatkan alur kerja pengembangan tim Anda hari ini.